<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title=${news.title}, content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${news.title} + ' - 扶贫助农电商平台'">新闻详情 - 扶贫助农电商平台</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        .news-header {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 60px 0;
        }
        .news-content {
            line-height: 1.8;
            font-size: 1.1rem;
        }
        .news-meta {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        .related-news {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 10px;
        }
        .related-news-item {
            border-bottom: 1px solid #dee2e6;
            padding: 15px 0;
        }
        .related-news-item:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb" class="bg-light py-3">
            <div class="container">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="/" class="text-decoration-none">首页</a></li>
                    <li class="breadcrumb-item"><a href="/news/list" class="text-decoration-none">新闻资讯</a></li>
                    <li class="breadcrumb-item">
                        <a th:href="@{/news/list(type=${news.type})}" 
                           class="text-decoration-none" 
                           th:text="${news.type}">新闻类型</a>
                    </li>
                    <li class="breadcrumb-item active" th:text="${news.title}">新闻标题</li>
                </ol>
            </div>
        </nav>

        <!-- 新闻内容 -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <!-- 新闻标题和元信息 -->
                        <div class="news-meta">
                            <h1 class="h2 mb-3" th:text="${news.title}">新闻标题</h1>
                            <div class="d-flex flex-wrap gap-4 text-muted">
                                <span><i class="fas fa-tag"></i> <span th:text="${news.type}">新闻类型</span></span>
                                <span><i class="fas fa-user"></i> <span th:text="${news.author}">作者</span></span>
                                <span><i class="fas fa-calendar"></i> <span th:text="${#temporals.format(news.createTime, 'yyyy-MM-dd HH:mm')}">发布时间</span></span>
                                <span><i class="fas fa-eye"></i> <span th:text="${news.viewCount}">0</span> 次浏览</span>
                            </div>
                        </div>

                        <!-- 新闻图片 -->
                        <div class="mb-4" th:if="${news.imageUrl}">
                            <img th:src="@{${news.imageUrl}}" th:alt="${news.title}" 
                                 class="img-fluid rounded" style="width: 100%; max-height: 400px; object-fit: cover;">
                        </div>

                        <!-- 新闻内容 -->
                        <div class="news-content">
                            <p th:text="${news.content}" style="white-space: pre-wrap;">
                                新闻内容...
                            </p>
                        </div>

                        <!-- 分享按钮 -->
                        <div class="mt-5 pt-4 border-top">
                            <h5>分享这篇文章</h5>
                            <div class="d-flex gap-2">
                                <button class="btn btn-outline-primary" onclick="showComingSoon('微博分享')">
                                    <i class="fab fa-weibo"></i> 微博
                                </button>
                                <button class="btn btn-outline-success" onclick="showComingSoon('微信分享')">
                                    <i class="fab fa-weixin"></i> 微信
                                </button>
                                <button class="btn btn-outline-info" onclick="copyLink()">
                                    <i class="fas fa-link"></i> 复制链接
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 侧边栏 -->
                    <div class="col-lg-4">
                        <!-- 相关新闻 -->
                        <div class="related-news" th:if="${relatedNews != null and !#lists.isEmpty(relatedNews)}">
                            <h5 class="mb-4"><i class="fas fa-newspaper"></i> 相关新闻</h5>
                            <div th:each="relatedItem : ${relatedNews}" class="related-news-item">
                                <h6 class="mb-2">
                                    <a th:href="@{/news/detail/{id}(id=${relatedItem.id})}" 
                                       class="text-decoration-none" 
                                       th:text="${relatedItem.title}">相关新闻标题</a>
                                </h6>
                                <small class="text-muted">
                                    <i class="fas fa-calendar"></i> 
                                    <span th:text="${#temporals.format(relatedItem.createTime, 'yyyy-MM-dd')}">2024-01-01</span>
                                    <i class="fas fa-eye ms-2"></i> 
                                    <span th:text="${relatedItem.viewCount}">0</span>
                                </small>
                            </div>
                        </div>

                        <!-- 返回列表 -->
                        <div class="mt-4">
                            <a href="/news/list" class="btn btn-success w-100">
                                <i class="fas fa-arrow-left"></i> 返回新闻列表
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- jQuery -->
    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
    <!-- 自定义JS -->
    <script th:src="@{/js/common.js}"></script>
</body>
</html> 